import GenderCheckbox from "./GenderCheckbox";

const SignUp = () => {
  return (
    <div className="flex flex-col items-center justify-center min-w-96 mx-auto">
      <div className="w-fll p-6 rounded-lg shadow-md bg-gray-400 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-10">
        <h1 className="text-3xl font-semibold text-center text-gray-300">
          Sign Up<span className="text-blue-500 ml-2">ChatApp</span>
        </h1>
      </div>

      <form action="">
        <div>
          <label className="label p-2" htmlFor="FullName">
            <span className="text-base label-text">FullName</span>
          </label>
          <input
            id="FullName"
            type="text"
            placeholder="Enter Full Name"
            className="w-full input input-bordered h-10"
          />
        </div>

        <div>
          <label className="label p-2" htmlFor="Username">
            <span className="text-base label-text">Username</span>
          </label>
          <input
            id="Username"
            type="text"
            placeholder="Enter Username"
            className="w-full input input-bordered h-10"
          />
        </div>

        <div>
          <label className="label p-2" htmlFor="Password">
            <span className="text-base label-text">Password</span>
          </label>
          <input
            id="Password"
            type="text"
            placeholder="Enter Password"
            className="w-full input input-bordered h-10"
          />
        </div>

        <div>
          <label className="label p-2" htmlFor="ConfirmPassword">
            <span className="text-base label-text">Confirm Password</span>
          </label>
          <input
            id="ConfirmPassword"
            type="text"
            placeholder="Enter Confirm Password"
            className="w-full input input-bordered h-10"
          />
        </div>

        <GenderCheckbox />

        <a
          href="###"
          className="text-sm hover:underline hover:text-blue-600 mt-2 inline-block p-2"
        >
          Already have an account?
        </a>
        <div>
          <button className="btn btn-block btn-sm mt-2">Sign Up</button>
        </div>
      </form>
    </div>
  );
};

export default SignUp;
